<template>
  <div>
    <div class="supplier">
      <header class="mint-header is-fixed">
        <div class="mint-header-button is-left">
          <button class="mint-button mint-button--default mint-button--normal">
            <span class="mint-button-icon">
              <i class="mintui mintui-back" @click="$router.go(-1)"></i>
            </span>
          </button>
        </div>
        <h1 class="mint-header-title">{{supplierInfo.supplierWarehouse}}</h1>
        <div class="mint-header-button is-right">
          <button class="mint-button mint-button--default mint-button--normal">
            <label class="mint-button-text"></label>
          </button>
        </div>
      </header>
      <div class="supplier-info">
        <p>
          <span style="color: #F5A623;">配货率：{{supplierInfo.supplierRate}}%</span>支持退货</p>
        <p>
          <span>发货时间：{{supplierInfo.expressDeclare}}</span>发货保障：{{supplierInfo.sendPromise}}小时内发货</p>
      </div>
      <div class="sort">
        <span class="sortBtn" @click="()=>flag=!flag">排序</span>
        <span class="count">共计{{total}}款</span>
      </div>
      <!--<div class="dropList" v-if="flag">
                            <mt-radio v-model="value" :options="options">
                            </mt-radio>
                          </div>-->
      <transition-group name="fade" tag="div">
        <div class="dropList" v-if="flag" key="1">
          <mt-radio v-model="value" :options="options" @change="check">
          </mt-radio>
        </div>
      </transition-group>
      <transition-group name="fade" tag="div">
        <div class='popContainer' v-if="flag" key="2" @click="()=>flag=false"></div>
      </transition-group>
      <mt-loadmore :top-method="loadTop" ref="loadmore">
        <div class="goodsList" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10" v-if="show">
          <Waterfall :gutterHeight="10" :maxCol="2" :percent="[1,1]">
            <WaterfallItem v-for="item in supplierGoodsList">
              <a href="#" class="goodIndex">
                <img :src="item.goodsImg" alt="" v-if="item.goodsImg">
                <img src="./../../assets/common/images/none-bg.jpg" alt="" v-else>
                <div class="info">
                  <h3 style="font-weight:700;">{{item.sellingPoints}}</h3>
                  <p style="font-weight:700;">￥{{item.goodsMoney|formatMoney}}
                    <span style="color:#AEAEAE;text-decoration:line-through;margin-left:-1px;">￥{{item.goodsPrice|formatMoney}}</span>
                    <span style="color:#D1041D;font-weight:700;float:right">{{item.goodsDiscount}}折</span>
                  </p>
                  <p style="color:#AEAEAE;">库存：{{item.stockNum}}</p>
                  <p style="color:#AEAEAE;">尺码：{{item.sizeName}}</p>
                </div>
              </a>
            </WaterfallItem>
          </Waterfall>
        </div>
      </mt-loadmore>
    </div>
  </div>
</template>
<script>
import footertab from '@/components/footer/footer'
import {
  getSupplierInfo,
  getAppSupplierGoodsList
} from '@/api/shop'
import { Waterfall, WaterfallItem } from 'vue2-waterfall'
export default {
  data() {
    return {
      flag: false,
      value: '1',
      show: true,
      loading: false,
      uId: this.$route.query.uId,
      pageIndex: 0,
      pageSize: 50,
      time: 1,
      price: null,
      num: null,
      discount: null,
      total: '',
      supplierInfo: {},
      supplierGoodsList: [],
      options: [
        {
          label: '最新更新',
          value: '1'
        },
        {
          label: '价格从低到高',
          value: '2'
        },
        {
          label: '价格从高到低',
          value: '3'
        },
        {
          label: '库存从高到低',
          value: '4'
        },
        {
          label: '折扣从低到高',
          value: '5'
        }
      ]
    }
  },
  watch: {},
  components: {
    footertab,
    Waterfall,
    WaterfallItem
  },
  computed: {
  },
  created() {
    this.fetchData()
  },
  methods: {
    loadTop() {
      // 下拉刷新
      this.$refs.loadmore.onTopLoaded()
      this.supplierGoodsList = []
      getAppSupplierGoodsList({ uId: this.uId, pageIndex: this.pageIndex, pageSize: this.pageSize, time: this.time, price: this.price, num: this.num, discount: this.discount }).then(res => {
        this.supplierGoodsList = this.supplierGoodsList.concat(res.data.supplierGoodsList)
        this.total = res.data.total
      })
    },
    loadMore() {
      console.log(123)
      // this.loading = true
      this.pageIndex++
      getAppSupplierGoodsList({ uId: this.uId, pageIndex: this.pageIndex, pageSize: this.pageSize, time: this.time, price: this.price, num: this.num, discount: this.discount }).then(res => {
        this.supplierGoodsList = this.supplierGoodsList.concat(res.data.supplierGoodsList)
        this.total = res.data.total
      })
      // setTimeout(() => {
      //   this.loading = false
      // }, 5000)
    },
    fetchData() {
      getSupplierInfo({ uId: this.uId }).then(res => {
        this.supplierInfo = res.data.supplierInfo
      })
    },
    check() {
      this.$nextTick(() => {
        this.pageIndex = 0
        this.supplierGoodsList = []
        this.num = null
        this.discount = null
        this.time = null
        this.price = null
        if (this.value === '1') {
          this.time = 1
        }
        if (this.value === '2') {
          this.price = 1
        }
        if (this.value === '3') {
          this.price = 2
        }
        if (this.value === '4') {
          this.num = 2
        }
        if (this.value === '5') {
          this.discount = 1
        }
        this.show = false
        window.scrollTo(0, 0)
        this.flag = false
        setTimeout(() => {
          this.show = true
        }, 50)
      })
    }
  }
}

</script>
<style lang="scss">
@import '~assets/common/css/mixin.scss';

.supplier {
  min-height: 100vh;
  margin-top: 40px;
  .mint-header {
    background-color: #262626;
    z-index: 2;
  }

  .mint-button-text {
    color: #F5A623;
  }

  .choose.ly-tab {
    width: 74%;
    height: 30px;
    background-color: #626262;
    overflow: hidden;
    border: none;
    .ly-tab-list {
      padding: 0;
      .ly-tab-item {
        float: left;
        margin-top: 4px;
        margin-left: 5px!important;
        border-radius: 5px;
        height: 22px;
        line-height: 22px;
        padding: 0 10px;
        background-color: #A4A4A4;
        .ly-tab-item-icon {
          margin: 0;
        }
        .ly-tab-item-label {
          margin: 0;
          line-height: 22px;
        }
      }
    }
  }
  .supplier-info {
    height: 62px;
    border-bottom: 1px solid #F7F7F7;
    background-color: #fff;
    padding: 5px 10px;
    position: fixed;
    z-index: 2;
    width: 100%;
    p {
      font-weight: 700;
      height: 25px;
      line-height: 25px;
      word-wrap: break-word;
      word-break: break-all;
      overflow: hidden;
      span {
        font-weight: 700;
        display: inline-block;
        width: 58%;
        height: 25px;
        line-height: 25px;
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
        vertical-align: middle;
      }
    }
  }
  .sort {
    width: 100%;
    height: 40px;
    background-color: #fff;
    padding: 0 10px;
    font-size: 14px;
    line-height: 40px;
    position: fixed;
    z-index: 2;
    top: 102px;
    border-bottom: 1px solid #F7F7F7;
    .sortBtn {
      float: left;
    }
    .count {
      float: right;
    }
  }

  .dropList {
    height: 218px;
    width: 100%;
    background-color: #fff;
    position: fixed;
    z-index: 2;
    top: 142px;
    .mint-cell-wrapper {
      font-size: 14px;
    }
  }
  .popContainer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.3);
  }
  .goodsList {
    overflow: hidden;
    padding: 2.7%;
    padding-top: 112px;
    .goodIndex {
      display: inline-block;
      background-color: #fff;
      border: 1px solid rgba(174, 174, 174, 0.3);
      color: #000;
      margin: 0 5px;
      img {
        width: 100%;
        height: auto;
      }
      .info {
        padding: 5px;
        h3 {
          margin-bottom: 10px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        p {
          line-height: 20px;
          word-wrap: break-word;
          word-break: break-all;
          overflow: hidden;
        }
      }
    }
  }
}
</style>
